<template>
  <div class="home">
    <div class="bottons">
      <el-button @click="gotoECharts(index)" v-for="(item, index) in languages" :key="index" :loading="lang == index ? loading : false" :type="lang == index ? 'danger' : 'primary'">{{item}}</el-button>
    </div>
    <div class="buttons-by-type">
      <el-button @click="changeType(index)" style="margin-left: 0; margin-bottom: 10px" v-for="(item, index) in showType" :key="index" :type="type == index ? 'danger' : 'primary'">{{item}}</el-button>
    </div>
    <div id="box"></div>
    <div v-loading="loading" id="loading"></div>
  </div>
</template>

<script>
import geo from '@/assets/jsons/geo.json'
import city from '@/assets/jsons/citys.json'
import echarts from 'echarts'
import bmap from 'echarts/extension/bmap/bmap'
import http from 'axios'
export default {
  name: 'Home',
  components: {
    
  },
  data() {
    return {
      languages: {
        c: 'C',
        android: 'Android',
        cpp: 'C++',
        cs: 'C#',
        go: 'Go',
        html: 'html',
        ios: 'Ios',
        java: 'Java',
        JavaScript: 'JavaScript',
        php : 'php',
        python: 'python',
        shell: 'shell',
        vue: 'vue',
        data: '数据分析',
        yunwei: '运维'
      },
      lang: 'c',
      loading: true,
      data: [],
      city: [],
      geo: {},
      max: 0,
      multi: 100,
      showType: [
        '招聘数量',
        '最低工资',
        '最高工资',
        '平均工资'
      ],
      type: 0
    }
  },
  methods: {
    gotoECharts(index) {
      this.lang = index
      this.init()
    },
    convertData() {
      const res = [], len = this.data.length
      const citys = {}
      for (let j = 0; j < len; j++) {
          if (citys[this.data[j].city]) {
              citys[this.data[j].city].push(this.data[j])
          } else {
              citys[this.data[j].city] = []
              citys[this.data[j].city].push(this.data[j])
          }
      }
      this.max = 0
      for (const city in citys) {
          const geoCoord = this.geo[city];
          let value = 0, val = 0
          if (geoCoord) {
            switch(this.type) {
              case 0: //  招聘数量
                val = citys[city].length
                if (val > this.max) this.max = val
                value = geoCoord.concat(val)
                break;
              case 1:
                val = this.formatDatas(citys[city])
                value = geoCoord.concat(val)
                //  最低工资
                break;
              case 2:
                val = this.formatDatas(citys[city])
                value = geoCoord.concat(val)
                //  最高工资
                break;
              case 3:
                val = this.formatDatas(citys[city])
                value = geoCoord.concat(val)
                //  平均工资
                break;
              default:
                val = citys[city].length
                if (val > this.max) this.max = val
                value = geoCoord.concat(val)
            }
            res.push({
                name: city,
                value: value,
            });
          }
      }
      return res;
    },
    formatDatas(data) {
      let tmp_val = 0, len = data.length
      switch (this.type) {
        case 0:
          break;
        case 1:
          for (let i = 0; i < len; i++) {
            tmp_val += parseFloat(data[i].salary_min)
          }
          return parseFloat(tmp_val / len).toFixed(2)
          break;
        case 2:
          for (let i = 0; i < len; i++) {
            tmp_val += parseFloat(data[i].salary_max)
          }
          return parseFloat(tmp_val / len).toFixed(2)
          break;
        case 3:
          let tmp_val2 = 0
          for (let i = 0; i < len; i++) {
            tmp_val += parseFloat(data[i].salary_min)
            tmp_val2 += parseFloat(data[i].salary_min)
          }
          return parseFloat((tmp_val + tmp_val2) / len).toFixed(2)
          break;
      }
    },
    renderItem(params, api) {
        const coords = [
            // [116.7,39.53],
            // [103.73,36.03],
            // [112.91,27.87],
            // [120.65,28.01],
            // [119.57,39.95]
        ];
        const points = [];
        for (let i = 0; i < coords.length; i++) {
            points.push(api.coord(coords[i]));
        }
        const color = api.visual('color');

        return {
          type: 'polygon',
          shape: {
              points: echarts.graphic.clipPointsByRect(points, {
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height
              })
          },
          style: api.style({
              fill: color,
              stroke: echarts.color.lift(color)
          })
      };
    },
    async init() {
      let _ = this
      const multi = this.multi
      await http.get('/data/json/202003/jobs_' + this.lang + '.json', {}).then(res => {
        if (res.status === 200) {
          this.data = res.data
        }
      }).catch(err => {
        console.error(err)
      })
      // this.data = require('@/assets/jsons/jobs_' + this.lang + '.json')
      this.option = {
            backgroundColor: 'transparent',
            title: {
                text: this.languages[this.lang],
                subtext: ' 前程无忧3月份 ' + this.languages[this.lang] + ' 招聘数量',
                sublink: 'https://www.51job.com',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: function(val) {
                  if (_.type == 0)
                    return '<div><strong>招聘人数</strong></div><div><strong>'+val['data'].name+'</strong>: '+val['value'][2]+'</div>'
                  else
                    return '<div><strong>'+_.showType[_.type]+'</strong></div><div><strong>'+val['data'].name+'</strong>: '+val['value'][2]+'K</div>'
                }
            },
            bmap: {
                center: [104.114129, 37.550339],
                zoom: 5,
                roam: true,
                mapStyle: {
                  styleJson: [
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": {
                            "color": "#044161"
                        }
                    },
                    {
                        "featureType": "land",
                        "elementType": "all",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "boundary",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#064f85"
                        }
                    },
                    {
                        "featureType": "railway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#005b96",
                            "lightness": 1
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#00508b"
                        }
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "green",
                        "elementType": "all",
                        "stylers": {
                            "color": "#056197",
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "subway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "manmade",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "local",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "boundary",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#029fd4"
                        }
                    },
                    {
                        "featureType": "building",
                        "elementType": "all",
                        "stylers": {
                            "color": "#1a5787"
                        }
                    },
                    {
                        "featureType": "label",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    }
                  ]
                }
            },
            series : [
                {
                    name: '招聘数量',
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    data: this.convertData(this.data.sort(function (a, b) {return a.city + b.city;}).slice(0, 6)),
                    symbolSize: function (val) {
                      const len = (parseInt(val[2]) + "").length
                      if (len == 5) {
                        return val[2] / 100;
                      } else if(len == 4) {
                        return val[2] / 50;
                      } else if(len == 3) {
                        return val[2] / 17;
                      } else if(len == 2) {
                        return val[2] / 3;
                      } else {
                        return val[2] * 1
                      }
                    },
                    showEffectOn: 'emphasis',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    itemStyle: {
                        color: '#f4e925',
                        shadowBlur: 10,
                        shadowColor: '#333',
                        formatter: '{c}',
                    },
                    zlevel: 1,
                }
            ]
        }
        const echat = echarts.init(document.getElementById("box"))
        echat.setOption(this.option)
    },
    changeType(index) {
      this.type = index
      this.init()
    }
  },
  created () {
    this.geo = geo
    this.city = city
  },
  mounted () {
    this.init()
    // const echat = echarts.init(document.getElementById("box"))
    // echat.setOption(this.option)
    this.loading = false
  },
}
</script>

<style>
  .home {
    padding: 30px;
  }
  .bottons {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 3;
  }
  #box, #loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  #loading {
    z-index: 0;
  }
  .buttons-by-type {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 100px;
    text-align: center;
    z-index: 3;
  }
</style>